<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef; padding-bottom: 180rpx"
      @scroll="handleScroll"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <!-- 顶部 搜索 banner -->
      <view>
        <u-navbar
          backIconColor="#fff"
          :is-back="true"
          :background="scrollTop >= 100 ? background1 : background"
          :border-bottom="false"
          :title="scrollTop >= 100 ? '公益基金' : ''"
          title-color="#fff"
        >
        </u-navbar>
        <!-- </view> -->
        <view class="" style="position: relative">
          <view
            class="contentBg"
            :style="{
              paddingTop: `${statusBarHeight + navbarHeight}px`,
              backgroundImage: `url(${getImageUrl('jj-bg.png')})`,
              height: `${200 + statusBarHeight}px`,
              top: `-${statusBarHeight + navbarHeight}px`
            }"
          >
          </view>
        </view>
        <view class="content">
          <view class="top">{{ pageTitle }}</view>
          <view class="card">
            <view class="tabs dis-flex flex-y-around">
              <view
                @click="changeTab(i)"
                class="tab-item"
                :class="checkTabIndex == i ? 'checked' : ''"
                v-for="(tab, i) in tabs"
                :key="i"
              >
                <text class="">{{ tab.name }}</text>
                <image
                  class="plate-item-image"
                  v-if="checkTabIndex == i"
                  src="@/static/hxxz.png"
                ></image>
              </view>
            </view>
            <view class="item-list">
              <view class="rank-item dis-flex">
                <view class="rank td">排名</view>
                <view class="user td">用户</view>
                <view class="edu td">贡献额度(元)</view>
              </view>
              <view class="rank-item dis-flex" v-for="(item, index) in itemList" :key="index">
                <view class="rank" v-if="index > 2">
                  {{ index + 1 }}
                </view>
                <view class="rank" v-else-if="index == 0">
                  <u-image src="@/static/rank_0.png" width="64rpx" height="64rpx"></u-image>
                </view>
                <view class="rank" v-else-if="index == 1">
                  <u-image src="@/static/rank_1.png" width="64rpx" height="64rpx"></u-image>
                </view>
                <view class="rank" v-else-if="index == 2">
                  <u-image src="@/static/rank_2.png" width="64rpx" height="64rpx"></u-image>
                </view>

                <view class="user dis-flex flex-x-center">
                  <u-avatar :src="item.user.avatar" size="60"></u-avatar>
                  <view class="user-info">
                    <view class="nick">{{ item.user.nickname }}</view>
                    <view class="phone">{{ item.user.phone }}</view>
                  </view>
                </view>
                <view class="edu">{{ item.edu }}</view>
              </view>
              <u-gap height="200"></u-gap>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <view class="fixed-wapper">
      <view class="fixed-box">
        <view class="my-count dis-flex flex-y-between flex-x-center">
          <view class="user dis-flex flex-x-center flex-y-center">
            <u-avatar :src="user.avatar" size="60"></u-avatar>
            <view class="user-info">
              <view class="nick">{{ user.nickname }}</view>
              <view class="phone">{{ user.phone }}</view>
            </view>
          </view>
          <view class="r">排行榜</view>
        </view>
        <view class="my-rank dis-flex flex-y-between flex-x-center">
          <view class="edu">贡献额度(元)：18.98</view>
          <view class="rank">NO.118</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      pageTitle: '教育基金贡献榜',
      scrollTop: 0,
      checkTabIndex: 0,
      background: {
        background: 'transparent'
      },
      background1: {
        background: '#10A28F'
      },
      imgStyle: {
        width: '12rem'
      },
      statusBarHeight: systemInfo.statusBarHeight,
      tabs: [
        {
          name: '月榜'
        },
        {
          name: '总榜'
        }
      ],
      user: {
        avatar: '',
        nickname: '用户昵称',
        phone: '133****7878'
      },
      itemList: [
        {
          user: {
            avatar: '',
            nickname: '用户昵称',
            phone: '133****7878'
          },
          edu: '1988.00'
        },
        {
          user: {
            avatar: '',
            nickname: '用户昵称',
            phone: '133****7878'
          },
          edu: '1988.00'
        },
        {
          user: {
            avatar: '',
            nickname: '用户昵称',
            phone: '13377687878'
          },
          edu: '1988.00'
        },
        {
          user: {
            avatar: '',
            nickname: '用户昵称',
            phone: '13377687878'
          },
          edu: '1988.00'
        },
        {
          user: {
            avatar: '',
            nickname: '用户昵称',
            phone: '13377687878'
          },
          edu: '1988.00'
        },
        {
          user: {
            avatar: '',
            nickname: '用户昵称',
            phone: '13377687878'
          },
          edu: '1988.00'
        },
        {
          user: {
            avatar: '',
            nickname: '用户昵称',
            phone: '13377687878'
          },
          edu: '1988.00'
        },
        {
          user: {
            avatar: '',
            nickname: '用户昵称',
            phone: '13377687878'
          },
          edu: '1988.00'
        },
        {
          user: {
            avatar: '',
            nickname: '用户昵称',
            phone: '13377687878'
          },
          edu: '1988.00'
        },
        {
          user: {
            avatar: '',
            nickname: '用户昵称',
            phone: '13377687878'
          },
          edu: '1988.00'
        },
        {
          user: {
            avatar: '',
            nickname: '用户昵称',
            phone: '13377687878'
          },
          edu: '1988.00'
        }
      ]
    }
  },
  onLoad(options) {
    if (options.type && options.type == 2) {
      this.pageTitle = '养老基金贡献榜'
    }
  },
  created(options) {
    this.hidePhone()
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  methods: {
    handleScroll(e) {
      // 页面滚动时触发
      this.scrollTop = e.detail.scrollTop // 更新滚动位置
      // console.log('页面上滑', this.scrollTop);
    },
    queryList() {},
    changeTab(index) {
      this.checkTabIndex = index
    },
    hidePhone() {
      const app = this
      let newList = []
      app.itemList.forEach((item) => {
        item.user.phone = item.user.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
        newList.push(item)
      })
      app.itemList = newList
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 400rpx;
}
.plate-item-image {
  width: 36rpx;
  height: 8rpx;
  margin-top: 10rpx;
}
.content {
  position: relative;
  padding: 20rpx;
  .top {
    font-weight: 500;
    font-size: 48rpx;
    color: #ffffff;
    text-align: center;
  }
  .card {
    background: #ffffff;
    border-radius: 20rpx;
    width: 100%;
    padding: 30rpx;
    margin-top: 30rpx;
    .tabs {
      padding: 10rpx 50rpx;
      margin-bottom: 30rpx;
      .tab-item {
        font-size: 30rpx;
        color: #666666;
        text-align: center;
        display: flex;
        flex-flow: column;
        align-items: center;
      }
      .checked {
        font-weight: 500;
        font-size: 32rpx;
        color: #10a28f;
      }
    }
    .item-list {
      border-top: 1rpx solid #e6e6e6;
      .rank-item:last-child {
        border-bottom: none;
      }
      .rank-item {
        border-bottom: 1rpx solid #e6e6e6;
        padding: 30rpx 0;
        align-items: center;
        text-align: left;
        .td {
          font-size: 28rpx !important;
        }
        .rank {
          width: 10%;
          font-size: 40rpx;
          color: #333333;
          display: flex;
          justify-content: center;
          // text-align: center;
        }
        .user {
          width: 60%;
          padding-left: 80rpx;
          align-items: center;
          justify-content: flex-start;
          .user-info {
            padding-left: 4rpx;

            .nick {
              font-size: 30rpx;
              color: #333333;
            }
            .phone {
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
        .edu {
          width: 30%;
          font-size: 30rpx;
          color: #333333;
        }
      }
    }
  }
}
.fixed-wapper {
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx -1rpx 10rpx 0rpx rgba(153, 153, 153, 0.1);
  position: fixed;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  bottom: var(--window-bottom);
  .fixed-box {
    width: 100%;
    height: 180rpx;
    padding: 30rpx;
  }
  .my-count {
    padding-bottom: 14rpx;
    .user {
      .user-info {
        padding-left: 4rpx;

        .nick {
          font-size: 30rpx;
          color: #333333;
        }
        .phone {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
    .r {
      font-size: 26rpx;
      color: #999999;
    }
  }
  .my-rank {
    .edu {
      font-size: 28rpx;
      color: #333333;
    }
    .rank {
      font-weight: 500;
      font-size: 28rpx;
      color: #fa453c;
    }
  }
}
</style>
